<template>
  <view class="page">
    <cl-nav-bar></cl-nav-bar>
    <uni-swiper-dot :info="bannerList" field="content" :current="current">
      <swiper class="page_swiper" @change="handleSwiperChange">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view class="page_swiper_item" :class="'swiper-item' + index">
            <image :src="item.url" mode="aspectFill" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
  <view class="goods_info">
    <view class="goods_info_name">{{ detailData.name }}</view>
    <view class="goods_info_price">
      <text class="real" v-if="detailData.actualPrice"
        >原价：￥{{ detailData.actualPrice }}</text
      >
      <text v-if="detailData.showPrice"
        >活动价：￥{{ detailData.showPrice }}</text
      >
    </view>
    <view class="goods_info_des">{{ detailData.des }}</view>
    <!-- <view class="goods_info_nav">
      <view class="goods_info_nav_item"
        ><view class="flex_center"
          ><uni-icons type="phone-filled" size="20" color="#333"></uni-icons
          ><text class="ml_10">联系商家</text></view
        ><uni-icons type="right" size="16" color="#ccc"></uni-icons
      ></view>
    </view> -->
  </view>
  <view class="goods_image_list">
    <image
      class="goods_image_list_item"
      :src="item.url"
      mode="widthFix"
      v-for="item in detailImageList"
      :key="item.id"
    />
    <view class="goods_nav">
      <uni-goods-nav
        :buttonGroup="buttonGroup"
        :options="options"
        @click="iconClick"
        @buttonClick="buttonClick"
      />
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
const options = [
  // {
  //   icon: 'navigate',
  //   text: '导航',
  // },
  {
    icon: 'shop',
    text: '店铺',
  },
  {
    icon: 'cart',
    text: '购物车',
  },
]
const buttonGroup = [
  {
    text: '加入购物车',
    backgroundColor: '#ff0000',
    color: '#fff',
  },
  {
    text: '亮码消费',
    backgroundColor: '#ffa200',
    color: '#fff',
  },
]
const iconClick = ({ index }) => {
  switch (index) {
    case 0:
      uni._toPage('/pages/mall/index?id=' + detailData.value.mallLocationId)
      break

    default:
      break
  }
}

const buttonClick = ({ index }) => {
  switch (index) {
    case 0:
      handleAddCart()
      break

    default:
      break
  }
}

const detailData = ref({})
const bannerList = ref([])
const detailImageList = ref([])

onLoad((options) => {
  const { id } = options
  getGoodsDetail(id)
  getBannerList(id)
  getDetailImageList(id)
})

// 获取商品详情
const getGoodsDetail = (id) => {
  uni
    .request({
      url: '/shop/goodsController/' + id,
    })
    .then((res) => {
      if (res.length > 0) {
        detailData.value = res[0]
      }
    })
}

const getBannerList = (id) => {
  uni
    .request({
      url: '/shop/goodsController/listFileUrlById',
      data: {
        id,
        field: 'desFileIds',
      },
    })
    .then((res) => {
      bannerList.value = res
    })
}
const getDetailImageList = (id) => {
  uni
    .request({
      url: '/shop/goodsController/listFileUrlById',
      data: {
        id,
        field: 'contentFileIds',
      },
    })
    .then((res) => {
      detailImageList.value = res
    })
}

const current = ref(0)
const handleSwiperChange = (e) => {
  current.value = e.target.current
}

// 加入购物车
const handleAddCart = () => {
  uni.request({
    url: '/shop/shopBillController/shopCart',
    method: 'post',
    data: {
      goodsId: detailData.value.id,
      quantity: 1,
    },
  })
}

// 获取购物车列表
const handleGetCartList = () => {}
</script>

<style lang="scss" scoped>
.page_swiper {
  width: 100%;
  height: 600rpx;
  &_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.goods_info {
  padding: 20rpx;
  &_name {
    font-size: 38rpx;
    font-weight: bold;
  }
  &_price {
    font-size: 38rpx;
    color: #ff5000;
    .real {
      margin-right: 40rpx;
      font-size: 32rpx;
      text-decoration: line-through;
    }
  }
  &_des {
    margin: 10rpx 0;
    font-size: 32rpx;
  }
  &_nav {
    font-size: 32rpx;
    color: #333;
    &_item {
      display: flex;
      justify-content: space-between;
      padding: 6rpx;
      margin-bottom: 10rpx;
      border-radius: 10rpx;
    }
  }
}
.goods_image_list {
  margin-top: 20rpx;
  width: 100%;
  &_item {
    width: 100%;
  }
}
.goods_nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
